<template>
  <div class="page_main">
    <div class="search_box" style="position: relative;min-height: 30px">
      <el-form v-if="!is_sale" :inline="true" size="mini">
        <el-form-item>
          <el-radio-group v-model="type" size="mini">
            <el-radio-button :label="0">客户占用</el-radio-button>
            <el-radio-button :label="1">空位</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-switch
            style="display: block"
            v-model="toWeekAgoShow"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="显示上上周"
            inactive-text="不显示上上周"
          >
          </el-switch>
        </el-form-item>
      </el-form>
	  <el-button-group style="position: absolute;right: 10px;top: 0;">
		  <el-button type="primary" plain size="mini" @click="exportExcel">
			  导出
		  </el-button>
		  <el-button type="success" plain size="mini" @click="exportListExcel">
		    多楼盘导出
		  </el-button>
	  </el-button-group>
    </div>
    <div class="data_box">
      <table id="data_table" class="mailTable" :style="{'width':(getWidth()*200+800)+'px'}">
        <thead>
        <tr class="firstTr">
          <th class="firstTd column" style="width: 50px;background-color: #E4E7ED;z-index: 999;"><div>区域</div></th>
          <th class="column" style="width: 180px;background-color: #E4E7ED;z-index: 999;">项目</th>
          <th class="column" style="width: 80px;background-color: #E4E7ED;z-index: 999;">楼层</th>
          <th class="column" style="width: 120px;background-color: #E4E7ED;z-index: 999;">单次投放数量</th>
          <th
            v-if="type===1 ? (toWeekAgoShow && date.twoWeekAgo) || (!date.twoWeekAgo) : (date.hasOccupy && toWeekAgoShow && date.twoWeekAgo)||(date.hasOccupy  && !date.twoWeekAgo)"
            v-for="(date,i) in dataTimeArr" class="column" style="width: 200px;background-color: #E4E7ED;"
          >
            <div style="width: 200px;text-align: center">
              <span style="font-size: 12px">{{ date.beginDate + '~' + date.endDate }}</span><br>
              <span style="font-size: 12px;color: green">空闲：{{ date.vacancy_count }}</span><br>
			  <span style="font-size: 12px;color: red">占用：{{ date.occupy_count }} ({{ date.occupy_percentage }}%)</span><br>
              <span style="font-size: 12px;color: blue">上刊：{{ date.publish_count }} ({{ date.publish_percentage }}%)</span><br>
              <!-- <span style="font-size: 12px">上刊百分比：{{ date.publish_percentage }}</span> -->
              <el-popover v-show="type===0&&(firstFilterIndex===-1||firstFilterIndex===i)" v-if="is_export"
                          placement="bottom" width="150" trigger="click"
              >
                <div>
                  <el-checkbox :indeterminate="date.isIndeterminate" v-model="date.checkAll" @change="handleCheckAllChange(date, i, $event)">全选</el-checkbox>
                  <el-checkbox-group v-model="date.select_customer_ids" @change="customerSelectChange(date,i)">
                    <el-checkbox v-for="item in date.customerArr" :key="item.customerId" :label="item.customerId">
                      {{ item.customerName }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <el-button slot="reference" style="padding: 3px;margin-left: 20px" size="mini"
                           icon="el-icon-caret-bottom"
                >筛选
                </el-button>
              </el-popover>
            </div>
          </th>
        </tr>
        </thead>
        <tbody>
        <template v-for="area in reportData">
          <template v-for="(building,t) in area.building_arr">
            <template v-for="(floor,i) in building.floor_arr">
              <tr>
                <td v-if="t === 0 && i===0" class="firstTd column" :rowspan="area.rowspan" style="width: 50px;">
                  {{ area.area_name }}
                </td>
                <td v-if="i === 0" class="column" :rowspan="building.floor_arr.length"
                    style="width:400px;background-color: #F2F6FC"
                >
                  <el-button type="text" class="text-black" style="text-decoration: underline"
                             @click="showBuildingDetail(building)"
                  >
                    {{ building.building_area_name }}
                  </el-button>
                </td>
                <td class="column" style="width: 80px">
                  {{ floor.floor }}层
                </td>
                <td class="column" style="width: 120px;">
                  {{ floor.media_total_count }}
                </td>
                <td
                  v-if="type===0 && ((weekSummaryDateRangeExt.hasOccupy && toWeekAgoShow && weekSummaryDateRangeExt.twoWeekAgo) || (weekSummaryDateRangeExt.hasOccupy  && !weekSummaryDateRangeExt.twoWeekAgo))"
                  style="width: 200px"
                  v-for="(weekSummaryDateRangeExt,key) in floor.weekSummaryDateRangeExtList"
                  :key="key+'0'"
                  class="column"
                >
                  <div v-if="weekSummaryDateRangeExt.customerOccupyInfo.length>1">
                    总占用数量{{ weekSummaryDateRangeExt.occupyCount }}
                    <br v-if="weekSummaryDateRangeExt.customerOccupyInfo.length>1"/>
                  </div>
                  <div v-for="(WeekSummaryCustomerExt,i) in weekSummaryDateRangeExt.customerOccupyInfo"
                       :key="WeekSummaryCustomerExt.customerId"
                  >

                    <span v-if="WeekSummaryCustomerExt.flowStatus == 4" style="color: green;">
                    {{ WeekSummaryCustomerExt.customerName + '：' + WeekSummaryCustomerExt.occupyCount + '个' }}
                    </span>
                    <span v-if="WeekSummaryCustomerExt.flowStatus == 3" style="color: orange;">
                    {{ WeekSummaryCustomerExt.customerName + '：' + WeekSummaryCustomerExt.occupyCount + '个' }}
                    </span>
                    <span v-if="WeekSummaryCustomerExt.flowStatus == 0" style="color: gray;">
                    {{ WeekSummaryCustomerExt.customerName + '：' + WeekSummaryCustomerExt.occupyCount + '个' }}
                    </span>
                    <br
                      v-if="weekSummaryDateRangeExt.customerOccupyInfo.length>1 && i!=weekSummaryDateRangeExt.customerOccupyInfo.length-1"
                    />
                  </div>
                </td>
                <td
                  v-if="type===1 && ((toWeekAgoShow && weekSummaryDateRangeExt.twoWeekAgo) || (!weekSummaryDateRangeExt.twoWeekAgo))"
                  style="width: 200px"
                  v-for="(weekSummaryDateRangeExt,key) in floor.weekSummaryDateRangeExtList"
                  :key="key+'1'"
                  class="column" :class="weekSummaryDateRangeExt.free_point_count<=0?'red_td':''"
                >
                  <div>
                    {{ weekSummaryDateRangeExt.free_point_count > 0 ? weekSummaryDateRangeExt.free_point_count : 0 }}
                  </div>
                </td>
              </tr>
            </template>
          </template>
        </template>
        </tbody>
        <tr v-if="reportData.length == 0">
          <td class="column firstTd" colspan="4">暂无数据</td>
        </tr>
      </table>
    </div>
    <el-dialog title="项目明细" :visible.sync="centerDialogVisible" width="80%" center top="20px"
               @close="closeDetailDialog"
    >
      <div style="text-align: right;padding: 0 10px;margin-bottom: 10px">
        <el-button size="mini" type="primary" @click="dialogExportExcel(building_area_name)">导出</el-button>
      </div>
      <div style="max-height: 700px;overflow-y: auto">
        <table v-loading="detailTableLoading" id="dialogDataTable" class="mailTable">
          <tr class="firstTr">
            <th class="firstTd" style="font-size: 25px;line-height: 60px;background-color: #DCDFE6" colspan="5">
              {{ building_area_name }}点位表
            </th>
          </tr>
          <tr>
            <th class="column firstTd" style="width: 30px;background-color: #EBEEF5">栋数</th>
            <th class="column" style="width: 100px;background-color: #EBEEF5">单元</th>
            <th class="column" style="width: 80px;background-color: #EBEEF5">楼层</th>
            <th class="column" style="background-color: #EBEEF5">在刊客户</th>
            <th class="column" style="background-color: #EBEEF5">待上刊客户</th>
          </tr>
          <template v-for="building in building_data">
            <template v-for="(unit,index) in building.unit_arr">
              <template v-for="(floor,i) in unit.floor_arr">
                <tr>
                  <td v-if="index === 0 && i===0" style="width: 30px;" class="firstTd column"
                      :rowspan="building.rowspan"
                  >
                    {{ building.building_number }}栋
                  </td>
                  <td v-if="i === 0" class="column" style="width: 100px" :rowspan="unit.floor_arr.length">
                    {{ unit.unit_number }}单元
                  </td>
                  <td class="column" style="width: 80px">
                    {{ floor.floor }}层
                  </td>
                  <td class="column" :class="floor.inPublish.length>0?'green_div':''">
                    <div v-if="floor.inPublish.length>0" v-for="(customer,t) in floor.inPublish"
                         :key="customer.customerId"
                    >
                      <span>{{ customer.customerName + '：' + customer.occupyCount + '个' }}</span><br/>
                      <span>{{ customer.beginDate + '~' + customer.endDate }}</span>
                      <br v-if="t!=floor.inPublish.length-1&&floor.inPublish.length>1"/>
                    </div>
                    <div v-if="floor.inPublish.length===0">

                    </div>
                  </td>
                  <td class="column" :class="floor.waitPublish.length>0?'green_div':''">
                    <div v-if="floor.waitPublish.length>0">
                      <div v-for="(customer,t) in floor.waitPublish"
                           :key="customer.customerId"
                      >
                        <span>{{ customer.customerName + '：' + customer.occupyCount + '个' }}</span><br/>
                        <span>{{ customer.beginDate + '~' + customer.endDate }}</span>
                        <br v-if="t!=floor.waitPublish.length-1 && floor.waitPublish.length>1"/>
                      </div>
                    </div>
                    <div v-if="floor.waitPublish.length===0">

                    </div>
                  </td>
                </tr>
              </template>
            </template>
          </template>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
		<export-list-dialog ref="exportListDialogRef"></export-list-dialog>
  </div>
</template>

<script>
import { week_detail, week_summary } from '@/api/report/report'
import { is_salesperson } from '@/api/system/user'
import { company_list_all } from '@/api/customer/customer'
import XLSX from 'xlsx'
import { formatDateByFmt } from '@/utils/util'
import exportListDialog from './components/export_list.vue'

export default {
  name: 'index',
	components: {
		exportListDialog
	},
  data() {
    return {
      reportData: [],
      dataTimeArr: [],
      type: 0,
      is_sale: false,
      building_area_id: null,
      building_area_name: null,
      centerDialogVisible: false,
      building_data: [],
      detailTableLoading: false,
      customer_arr: [],
      select_customer_id_arr: [],
      source_data: [],
      now_data: [],
      firstFilterIndex: -1,
      is_export: true,
      toWeekAgoShow: false,
    }
  },
  created() {
    this.is_salesperson()
    this.week_summary()
    this.initCustomerArr()
  },
  methods: {
	  exportListExcel(){
		  this.$refs.exportListDialogRef.openThisDialog(this.now_data);
	  },
    exportExcel() {
      this.is_export = false
      this.$nextTick(() => {
        var table_elt = document.getElementById('data_table')
        var workbook = XLSX.utils.table_to_book(table_elt)
        var ws = workbook.Sheets['Sheet1']
        XLSX.utils.sheet_add_aoa(ws, [])
        XLSX.writeFile(workbook, (this.type === 1 ? '空位' : '客户占用') + (formatDateByFmt(new Date(), 'yyyyMMddhhmmss') + Math.floor(Math.random() * (1000000 - 1) + 1)) + '.xlsx')
        this.is_export = true
      })
    },
    dialogExportExcel(name) {
      var table_elt = document.getElementById('dialogDataTable')
      var workbook = XLSX.utils.table_to_book(table_elt)
      var ws = workbook.Sheets['Sheet1']
      XLSX.utils.sheet_add_aoa(ws, [])
      XLSX.writeFile(workbook, (name + '点位表') + (formatDateByFmt(new Date(), 'yyyyMMddhhmmss') + Math.floor(Math.random() * (1000000 - 1) + 1)) + '.xlsx')
    },
    week_summary() {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      week_summary().then(res => {
        loading.close()
        this.source_data = res.data
        this.now_data = this.source_data
        this.formatData(res.data)
        this.dataTimeArr.forEach(item => {
          const newArr = []
          item.customerArr.forEach(customer => {
            let find = newArr.find(c => c.customerId == customer.customerId)
            if (find === undefined) {
              newArr.push(customer)
            }
          })
          item.select_customer_ids = newArr.map(customer => {
            return customer.customerId
          })
          item.customerArr = newArr
          item.checkAll = true
          item.isIndeterminate = false
        })
      }).catch(() => {
        this.$message.error('系统出错')
        loading.close()
      })
    },
    /**
     * 获取用户是否是销售
     */
    is_salesperson() {
      is_salesperson().then(res => {
        this.is_sale = res.data
        if (this.is_sale) {
          this.type = 1
        }
      })
    },
    formatData(response) {
      let data = []
      this.dataTimeArr = []
      let count = 0
      response.forEach(item => {
        if (item.weekSummaryDateRangeExtList != null) {
          item.weekSummaryDateRangeExtList.forEach(t => {
            this.$set(t, 'free_point_count', item.media_total_count - t.occupyCount)
          })
          let area_data = data.find(tmp => tmp.area_name == item.area_name)
          if (area_data === undefined) {
            area_data = {}
            area_data.rowspan = 0
            area_data.area_name = item.area_name
            area_data.building_arr = []
            let building = {}
            building.building_id = item.building_area_id
            building.building_area_name = item.building_area_name
            building.floor_arr = []
            let floor = {}
            floor.floor = item.floor
            floor.media_total_count = item.media_total_count
            floor.weekSummaryDateRangeExtList = item.weekSummaryDateRangeExtList
            if (this.dataTimeArr.length === 0) {
              floor.weekSummaryDateRangeExtList.forEach(date => {
                const dateRange = {
                  beginDate: date.beginDate,
                  endDate: date.endDate,
                  currentWeekOrFuture: date.currentWeekOrFuture,
                  hasOccupy: date.hasOccupy,
                  twoWeekAgo: date.twoWeekAgo,
                  vacancy_count: date.vacancy_count,
                  publish_count: date.publish_count,
				  occupy_count: date.occupy_count,
                  publish_percentage: date.publish_percentage,
				  occupy_percentage: date.occupy_percentage,
                  customerArr: [],
                  select_customer_ids: [],
                  key: date.beginDate + '~' + date.endDate
                }
                if (date.customerOccupyInfo.length === 0) {
                  dateRange.customerArr.unshift({
                    customerId: 0,
                    customerName: '空白'
                  })
                }
                dateRange.customerArr = dateRange.customerArr.concat(date.customerOccupyInfo)
                this.dataTimeArr.push(dateRange)
              })
            } else {
              floor.weekSummaryDateRangeExtList.forEach(date => {
                let find = this.dataTimeArr.find(item => item.beginDate == date.beginDate && item.endDate == date.endDate)
                if (find) {
                  if ((find.customerArr.find(item => item.customerId === 0) === undefined) && date.customerOccupyInfo.length === 0) {
                    find.customerArr.unshift({
                      customerId: 0,
                      customerName: '空白'
                    })
                  }
                  find.customerArr = find.customerArr.concat(date.customerOccupyInfo)
                }
              })
            }
            building.floor_arr.push(floor)
            area_data.building_arr.push(building)
            area_data.rowspan++
            data.push(area_data)
          } else {
            let building = area_data.building_arr.find(building => building.building_id == item.building_area_id)
            if (building === undefined) {
              building = {}
              building.building_id = item.building_area_id
              building.building_area_name = item.building_area_name
              building.floor_arr = []
              let floor = {}
              floor.floor = item.floor
              floor.media_total_count = item.media_total_count
              floor.weekSummaryDateRangeExtList = item.weekSummaryDateRangeExtList
              floor.weekSummaryDateRangeExtList.forEach(date => {
                let find = this.dataTimeArr.find(item => item.beginDate == date.beginDate && item.endDate == date.endDate)
                if (find) {
                  if ((find.customerArr.find(item => item.customerId === 0) === undefined) && date.customerOccupyInfo.length === 0) {
                    find.customerArr.unshift({
                      customerId: 0,
                      customerName: '空白'
                    })
                  }
                  find.customerArr = find.customerArr.concat(date.customerOccupyInfo)
                }
              })
              building.floor_arr.push(floor)
              area_data.building_arr.push(building)
              area_data.rowspan++
            } else {
              let floor = building.floor_arr.find(floor => floor.floor == item.floor)
              if (floor === undefined) {
                floor = {}
                floor.floor = item.floor
                floor.media_total_count = item.media_total_count
                floor.weekSummaryDateRangeExtList = item.weekSummaryDateRangeExtList
                floor.weekSummaryDateRangeExtList.forEach(date => {
                  let find = this.dataTimeArr.find(item => item.beginDate == date.beginDate && item.endDate == date.endDate)
                  if (find) {
                    if ((find.customerArr.find(item => item.customerId === 0) === undefined) && date.customerOccupyInfo.length === 0) {
                      find.customerArr.unshift({
                        customerId: 0,
                        customerName: '空白'
                      })
                    }
                    find.customerArr = find.customerArr.concat(date.customerOccupyInfo)
                  }
                })
                building.floor_arr.push(floor)
                area_data.rowspan++
              }
            }
          }
        } else {
          count++
        }
      })
      this.reportData = data
      console.log(this.reportData)
    },
    formatFilterData(response) {
      let data = []
      response.forEach(item => {
        item.weekSummaryDateRangeExtList.forEach(t => {
          this.$set(t, 'free_point_count', item.media_total_count - t.occupyCount)
        })
        let area_data = data.find(tmp => tmp.area_name == item.area_name)
        if (area_data === undefined) {
          area_data = {}
          area_data.rowspan = 0
          area_data.area_name = item.area_name
          area_data.building_arr = []
          let building = {}
          building.building_id = item.building_area_id
          building.building_area_name = item.building_area_name
          building.floor_arr = []
          let floor = {}
          floor.floor = item.floor
          floor.media_total_count = item.media_total_count
          floor.weekSummaryDateRangeExtList = item.weekSummaryDateRangeExtList
          building.floor_arr.push(floor)
          area_data.building_arr.push(building)
          area_data.rowspan++
          data.push(area_data)
        } else {
          let building = area_data.building_arr.find(building => building.building_id == item.building_area_id)
          if (building === undefined) {
            building = {}
            building.building_id = item.building_area_id
            building.building_area_name = item.building_area_name
            building.floor_arr = []
            let floor = {}
            floor.floor = item.floor
            floor.media_total_count = item.media_total_count
            floor.weekSummaryDateRangeExtList = item.weekSummaryDateRangeExtList
            building.floor_arr.push(floor)
            area_data.building_arr.push(building)
            area_data.rowspan++
          } else {
            let floor = building.floor_arr.find(floor => floor.floor == item.floor)
            if (floor === undefined) {
              floor = {}
              floor.floor = item.floor
              floor.media_total_count = item.media_total_count
              floor.weekSummaryDateRangeExtList = item.weekSummaryDateRangeExtList
              building.floor_arr.push(floor)
              area_data.rowspan++
            }
          }
        }
      })
      this.reportData = data
    },
    showBuildingDetail(building) {
      if (this.is_sale) {
        return
      }
      this.building_area_id = building.building_id
      this.building_area_name = building.building_area_name
      this.centerDialogVisible = true
      this.getWeekDetail()
    },
    formatDetailData(response) {
      let data = []
      response.forEach(item => {
        let building = data.find(building => building.building_number == item.building_number)
        if (building === undefined) {
          building = {}
          building.building_number = item.building_number
          building.unit_arr = []
          building.rowspan = 1
          let unit = {}
          unit.unit_number = item.unit_number
          unit.floor_arr = []
          let floor = {}
          floor.floor = item.floor
          floor.waitPublish = item.waitPublish
          floor.inPublish = item.inPublish
          floor.media_total_count = item.media_total_count
          unit.floor_arr.push(floor)
          building.unit_arr.push(unit)
          data.push(building)
        } else {
          let unit = building.unit_arr.find(unit => unit.unit_number == item.unit_number)
          if (unit === undefined) {
            unit = {}
            unit.unit_number = item.unit_number
            unit.floor_arr = []
            let floor = {}
            floor.floor = item.floor
            floor.waitPublish = item.waitPublish
            floor.inPublish = item.inPublish
            floor.media_total_count = item.media_total_count
            unit.floor_arr.push(floor)
            building.unit_arr.push(unit)
            building.rowspan++
          } else {
            let floor = unit.floor_arr.find(floor => floor.floor == item.floor)
            if (floor === undefined) {
              floor = {}
              floor.floor = item.floor
              floor.waitPublish = item.waitPublish
              floor.inPublish = item.inPublish
              floor.media_total_count = item.media_total_count
              unit.floor_arr.push(floor)
              building.rowspan++
            }
          }
        }
      })
      this.building_data = data
    },
    getWeekDetail() {
      this.detailTableLoading = true
      week_detail({ building_area_id: this.building_area_id }).then(res => {
        this.formatDetailData(res.data)
        this.detailTableLoading = false
      })
    },
    closeDetailDialog() {
      this.building_data = []
      this.building_area_id = null
      this.building_area_name = null
    },
    initCustomerArr() {
      company_list_all().then(res => {
        this.customer_arr = res.data.map(item => {
          return {
            id: item.id,
            name: item.name
          }
        })
      })
    },
    customerSelectChange(obj, index) {
      let count = obj.customerArr.length, checkedCount = obj.select_customer_ids.length
      obj.checkAll = checkedCount === count;
      obj.isIndeterminate = checkedCount > 0 && checkedCount < count;
      if (count === checkedCount) {
        this.formatFilterData(this.source_data)
        this.firstFilterIndex = -1
      } else {
        this.firstFilterIndex = index
        let tmp_arr = []
        let flag = obj.select_customer_ids.find(id => id === 0) !== undefined
        // 去除所有不符合条件的行
        this.source_data.forEach(item => {
          if (flag && item.weekSummaryDateRangeExtList[index].customerOccupyInfo.length == 0) {
            tmp_arr.push(item)
          } else {
            for (let i = 0; i < item.weekSummaryDateRangeExtList[index].customerOccupyInfo.length; i++) {
              let tmp = item.weekSummaryDateRangeExtList[index].customerOccupyInfo[i]
              if (obj.select_customer_ids.find(id => id === tmp.customerId) !== undefined) {
                tmp_arr.push(item)
                break
              }
            }
          }
        })
        this.formatFilterData(tmp_arr)
      }
    },
    handleCheckAllChange(obj, index, val) {
      var arr = []
      if(val) arr = obj.customerArr
      obj.select_customer_ids = arr.map(o=>{
        return o.customerId
      })
      this.customerSelectChange(obj, index)
    },
    getWidth() {
      if (this.type === 1) {// 如果是空位
        return this.toWeekAgoShow ? this.dataTimeArr.length : this.dataTimeArr.length - 1
      } else {
        const filter = this.dataTimeArr.filter(date => (date.hasOccupy && this.toWeekAgoShow && date.twoWeekAgo) || (date.hasOccupy && !date.twoWeekAgo))
        return filter.length
      }
    }
  }
}
</script>

<style scoped>
.search_box {

}

.data_box {
  margin-top: 10px;
  overflow: auto;
  width: 100 vm;
  max-height: calc(100vh - 170px);
}

.page_main {
  margin-top: 20px;
  padding: 0 20px;
}

.mailTable {
  min-width: 100%;
  font-size: 12px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}
 td:first-child,
  th:first-child {
    position: sticky;
    left: 0;
    /* 首行在左 */
    z-index: 1;
  }

  thead tr th {
    position: sticky;
    top: 0;
    /* 第一列最上 */
  }

  th:first-child {
    z-index: 2;
  }

/deep/ .mailTable tr th {
  width: 200px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  /*padding: 0 10px;*/
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
}

/deep/ .mailTable tr td {
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  /*padding: 0 10px;*/
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
}

/deep/ .firstTr td {
  border-top: 1px solid #E6EAEE;
}

/deep/ .firstTr th {
  border-top: 1px solid #E6EAEE;
}

/deep/ .firstTd {
  width: 150px !important;
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
}

.red_td {
  background-color: #e60000;
  color: white;
}

.green_div {
  background-color: #67C23A;
  color: white;
}
</style>
